<template>
	<view class="page">
        <nav-bar title="股东入驻"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view v-if="state == 1201" class="review_box">
			<image src="../../../static/icon/entering/icon_review.png" mode="aspectFit"></image>
			<text>谢谢您的支持，请等待审核！</text>
			<button @click="onJumpMall">去商城逛逛</button>
		</view>
		<view v-else-if="state == 1301" class="review_box">
			<image src="../../../static/icon/entering/icon_review.png" mode="aspectFit"></image>
			<text>审核失败，请重新填写</text>
			<button @click="state = ''">去填写</button>
		</view>
		<view v-else>
			<view class="input_form_box">
				<view class="input_box">
					<view class="name">推荐码</view>
					<view class="input_info" v-if="userInfo.recommendPhone">{{userInfo.recommendPhone || ""}}</view>
					<view class="input_info" v-else><input type="number" v-model="recommend" maxlength="11" placeholder="请输入推荐人手机号" /></view>
				</view>
				<view class="input_box line">
					<view class="name required">姓名</view>
					<view class="input_info"><input type="text" v-model="name" placeholder="请填写真实姓名，用于结算" /></view>
				</view>
				<view class="input_box line">
					<view class="name required">手机号</view>
					<view class="input_info"><input type="number" v-model="phone" maxlength="11" placeholder="请填写手机号码方便联系" /></view>
				</view>
				<view class="input_box line">
					<view class="name required">身份证号码</view>
					<view class="input_info"><input type="text" v-model="cardNo" maxlength="18" placeholder="请填写身份证号码" /></view>
				</view>
				<view class="input_box line">
					<view class="name required">申请合伙人级别</view>
					<view class="level_select">
						<view @click="type = 1101">
							<image v-if="type == 1101" src="../../../static/icon/entering/icon_star_select.png" mode="aspectFit"></image>
							<image v-else src="../../../static/icon/entering/icon_star.png" mode="aspectFit"></image>
							<text>一星</text>
						</view>
						<view @click="type = 1102">
							<image v-if="type == 1102" src="../../../static/icon/entering/icon_star2_select.png" mode="aspectFit"></image>
							<image v-else src="../../../static/icon/entering/icon_star2.png" mode="aspectFit"></image>
							<text>二星</text>
						</view>
						<view @click="type = 1103">
							<image v-if="type == 1103" src="../../../static/icon/entering/icon_star3_select.png" mode="aspectFit"></image>
							<image v-else src="../../../static/icon/entering/icon_star3.png" mode="aspectFit"></image>
							<text>三星</text>
						</view>
					</view>
				</view>
			</view>
			<view class="input_form_box marginTop">
				<view class="input_title">上传本人身份证照</view>
				<view class="input_box">
					<view class="id_card_box">
						<view @click="onUnloadImg(1000)">
							<image v-if="cardFront" :src="cardFront" mode="aspectFill"></image>
							<image v-else="" src="../../../static/icon/theme/ic_upload_portrait.png" mode="aspectFit"></image>
						</view>
						<view @click="onUnloadImg(2000)">
							<image v-if="cardReverse" :src="cardReverse" mode="aspectFill"></image>
							<image v-else="" src="../../../static/icon/theme/ic_upload_nationalemblem.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="protocol">
					<view class="active"></view>我已经阅读并了解了<text @click="onPageJump('/pages/user/protocol?type=1502')">《股东协议》</text>
				</view>
				<view class="form_but"><button class="active" @click="onSubmit">申请成为股东</button></view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			// 名称
			name: '',
			// 手机号码
			phone: '',
			// 身份证号码
			cardNo: '',
			// 身份证正面照
			cardFront: '',
			// 身份证反面照
			cardReverse: '',
			// 推荐码
			recommend: '',
			type:"",
			state:'',
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad(e) {
		if(e.state){
			this.state = e.state;
		}
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		//上传图片
		// type = 1000 负责人身份证正面照
		// type = 2000 负责人身份证反面照
		onUnloadImg(type) {
			this.$http.qnImgUpload({ count: 1 }).then(res => {
				if (type == 1000) {
					this.cardFront = res[0];
				} else if (type == 2000) {
					this.cardReverse = res[0];
				}
			});
		},
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onJumpMall() {
			uni.switchTab({
				url: this.$base.homePath
			});
		},
		onSubmit() {
			if (this.recommend) {
				if(!/\d{11}/.test(this.recommend)){
					uni.showToast({
						title: '推荐码为11位的手机号',
						icon: 'none'
					});
					return;
				}
			}
			if (this.name == '') {
				uni.showToast({
					title: '请输入您的姓名',
					icon: 'none'
				});
				return;
			}
			if (this.phone == '') {
				uni.showToast({
					title: '请输入您的手机号',
					icon: 'none'
				});
				return;
			}
			if (!this.$base.phoneRegular.test(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			if(this.cardNo == ""){
				uni.showToast({
					title: '请输入身份证号码',
					icon: 'none'
				});
				return;
			}
			if(!/[0-9a-zA-Z]{18}/.test(this.cardNo)){
				uni.showToast({
					title: '身份证号码不正确',
					icon: 'none'
				});
				return;
			}
			if(this.type == ""){
				uni.showToast({
					title: '请选择合伙人级别',
					icon: 'none'
				});
				return;
			}
			if(this.cardFront == ""){
				uni.showToast({
					title: '请上传身份证正面照',
					icon: 'none'
				});
				return;
			}
			if(this.cardReverse == ""){
				uni.showToast({
					title: '请上传身份证反面照',
					icon: 'none'
				});
				return;
			}
			let httpData = {
				name: this.name,
				phone: this.phone,
				cardNo: this.cardNo,
				cardFront: this.cardFront,
				cardReverse: this.cardReverse,
				type:this.type
			};
			if(this.recommend){
				httpData.recommend = this.recommend;
			}
			this.$http
				.post('api/distribution/v1/settled', httpData)
				.then(res => {
					uni.showModal({
						title: '入驻提示',
						content: '信息提交成功！等待工作人员审核~',
						showCancel: false,
						success: res => {
							uni.navigateBack();
						}
					});
				});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
	box-sizing: border-box;
}
.title {
	padding: 30upx;
	font-size: 32upx;
	color: #333333;
	font-weight: bold;
	text {
		@include  theme('font');
	}
}
.input_form_box {
	margin-left: 30upx;
	margin-right: 30upx;
	background-color: #fff;
	border-radius: 8upx;
	padding-top: 15upx;
	padding-right: 30upx;
	padding-left: 30upx;
	margin-bottom: 20upx;
	.input_box {
		padding: 0;
	}
	.input_title {
		padding: 30upx 0;
	}
	.input_box .name,.input_box .input_info{
		padding: 40upx 0upx;
	}
}
.level_select {
	display: flex;
	width: 100%;
	flex-shrink: 0;
	padding-bottom: 30upx;
	>view {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 88upx;
			height: 65upx;
		}
		text {
			font-size: 28upx;
			color: #333333;
			margin-top: 12upx;
		}
	}
}
.id_card_box {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-bottom: 30upx;
	> view {
		width: 300upx;
		height: 195upx;
		&:nth-child(2) {
			margin-left: 40upx;
		}
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.protocol {
	justify-content: flex-start;
	margin-top: 80upx;
}
.bottom_line {
	border-bottom: 1upx solid #f1f1f1;
}
.form_but {
	padding: 40upx 0upx 40upx 0upx;
	margin-top: 0;
	button {
		border-radius: 8upx;
		width: 100%;
	}
}
.review_box {
	padding: 60upx;
	height: 70vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image {
		width: 247upx;
		height: 248upx;
	}
	text {
		margin-top: 80upx;
	}
	button {
		margin-top: 120upx;
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		@include  theme('bg');
		border-radius: 8upx;
		font-size: 32upx;
		color: #ffffff;
	}
}
</style>
